@import "mixins";

$val: 10px;
$val2: 20px;

body {
  font-size: $val - $val2;
  background: blue;
}
div.container {
  background: #ccc;
  div.banner {
    float : left;
    ul.toplist {
      list-style: none;
      width : 600px;
      li.item {
        float : left; 
        p.link {
          a {
            text-decoration: none;
            &:hover {
               color: blue; 
            }
            span {
              color : red;
            }
          }
        }
      }
    }
  }
}

$dir : left;  // 这是变量 
/* 这是  注释 */
nav {
  border: {
    style: solid;
    width: 1px;
    color: #ccc;
  }
  border-#{$dir} : none; 
  margin-#{$dir} : none;
  padding-#{$dir} : none; 
}


div.box {
  @include rounded-corners($val);
  @include clearfix();
  
}

%pos {
  position : absolute;
  left: 0; right:0; 
  top:0; bottom:0;
  margin:auto;
}

.bigbox {
  @extend %pos; 
}

    